<template>
  <div class="main-content">
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="card">
            <img
              src="@/assets/imgs/serve/serve-1.jpg"
              alt=""
              style="width: 100%; height: 250px"
            />
            <div style="margin: 5px 0; font-size: 26px">保洁</div>
            <div style="margin-bottom: 10px; color: #666; font-size: 26px">
              简介：保洁服务，为业主提供保洁服务，包括清洁、消毒、拖地等。
            </div>
            <div style="text-align: right">
              <el-button
                type="primary"
                @click="
                  handfuwu({
                    name: 'select_service',
                  })
                "
                >订购服务</el-button
              >
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card">
            <img
              src="@/assets/imgs/serve/serve-2.jpg"
              alt=""
              style="width: 100%; height: 250px"
            />
            <div style="margin: 5px 0; font-size: 26px">点餐</div>
            <div style="margin-bottom: 10px; color: #666; font-size: 26px">
              简介：为老人提供早中晚餐点服务，包括早餐、中餐、晚餐等
            </div>
            <div style="text-align: right">
              <el-button
                type="primary"
                @click="
                  handfuwu({
                    name: 'serve-order',
                  })
                "
                >订购服务</el-button
              >
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card">
            <img
              src="@/assets/imgs/serve/serve-3.jpg"
              alt=""
              style="width: 100%; height: 250px"
            />
            <div style="margin: 5px 0; font-size: 26px">陪护</div>
            <div style="margin-bottom: 10px; color: #666; font-size: 26px">
              简介：陪护是为老人提供陪护服务，包括陪护、看护等
            </div>
            <div style="text-align: right">
              <el-button
                type="primary"
                @click="
                  handfuwu({
                    name: 'serve-peihu',
                  })
                "
                >订购服务</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in serveList" :key="item.id">
          <div class="card">
            <img :src="item.cover" alt="" style="width: 100%; height: 250px" />
            <div style="margin: 5px 0; font-size: 26px">{{ item.name }}</div>
            <div style="margin-bottom: 10px; color: #666; font-size: 26px">
              {{ item.descr }}
            </div>
            <div style="text-align: right">
              <el-button type="primary" @click="handleSign(item.id)"
                >预约服务</el-button
              >
              <el-button type="primary" @click="handfuwu(item)"
                >订购服务</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <!--  <el-dialog
      userName="报名信息"
      :visible.sync="fromVisible"
      width="40%"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form
        label-width="100px"
        style="padding-right: 50px"
        :model="form"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item prop="typeName" label="服务类型">
          <el-select
            v-model="form.typeName"
            style="width: 100%"
            @change="changePrice()"
          >
            <el-option
              v-for="item in typeList[4 - form.serveId]"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="time" label="预约时间">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择预约时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input
            v-model="form.address"
            autocomplete="off"
            placeholder="地址"
          ></el-input>
        </el-form-item>
        <el-form-item prop="price" label="费用">
          <span style="color: red; font-weight: 600">{{ form.price }}</span>
          <el-input v-model="form.price" autocomplete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="sign">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { userJwt } from "@/utils/request";
export default {
  name: "FrontServe",
  data() {
    return {
      serveList: [],
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      fromVisible: false,
      form: {
        phone: "",
      },
      rules: {
        typeName: [
          { required: true, message: "服务类型必选", trigger: "blur" },
        ],
        time: [{ required: true, message: "预约时间必选", trigger: "blur" }],
        phone: [{ required: true, message: "手机号必填", trigger: "blur" }],
      },
      typeList: [
        [
          {
            name: "民事",
            value: 100,
          },
          {
            name: "刑事",
            value: 100,
          },
          {
            name: "劳动",
            value: 100,
          },
          {
            name: "家庭",
            value: 100,
          },
        ],
        [
          {
            name: "语音",
            value: 300,
          },
          {
            name: "视频",
            value: 500,
          },
          {
            name: "面对面",
            value: 100,
          },
        ],
        [
          {
            name: "家电维修",
            value: 70,
          },
          {
            name: "数码办公",
            value: 50,
          },
          {
            name: "水电维修",
            value: 60,
          },
          {
            name: "家电清洗",
            value: 80,
          },
        ],
        [
          {
            name: "一般体检",
            value: 50,
          },
          {
            name: "肾功能",
            value: 100,
          },
          {
            name: "肝功能",
            value: 200,
          },
          {
            name: "血脂",
            value: 50,
          },
          {
            name: "血糖",
            value: 50,
          },
        ],
      ],
    };
  },
  created() {},
  methods: {
    addReserve(serveId) {
      this.$request
        .post("/reserve/add", { serveId: serveId, userId: this.user.id })
        .then((res) => {
          if (res.code === "200") {
            this.$message.success("预约成功");
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    load() {
      this.$request.get("/serve/selectAll").then((res) => {
        this.serveList = res.data || [];
      });
    },
    sign() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request.post("/reserve/add", this.form).then((res) => {
            if (res.code === "200") {
              this.$message.success("预约成功");
              this.fromVisible = false;
              this.form = {
                phone: "",
              };
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleSign(id) {
      this.form.serveId = id;
      this.form.userId = this.user.id;
      this.form.phone = this.user.phone;
      this.fromVisible = true;
    },
    changePrice() {
      this.typeList[4 - this.form.serveId].map((item) => {
        if (this.form.typeName === item.name) {
          this.form.price = item.value;
        }
      });
    },

    async handfuwu({ name }) {
      this.$router.push({
        name,
      });
    },
  },
};
</script>

<style scoped>
.card {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
